<template>
  <view class="image-card" :class="customClass" :style="{'padding-left': supportSelect ? '28px' : undefined}">
    <view class="card-box" @click="onClick">
      <custom-image class="image" style="margin-right: 10px;"
        :style="{'align-self': imageInfo.imageAlign}"
        v-if="imageInfo.show && imageInfo.imagePosition === 'left'"
        :src="imageInfo.src"
        :fit="imageInfo.fit"
        :width="imageInfo.width"
        :height="imageInfo.height"
        :round="imageInfo.round"
        :radius="imageInfo.radius"
      />
      <view class="card-content"><slot/></view>
      <custom-image class="image" style="margin-left: 10px;"
        :style="{'align-self': imageInfo.imageAlign}"
        v-if="imageInfo.show && imageInfo.imagePosition === 'right'"
        :src="imageInfo.src"
        :fit="imageInfo.fit"
        :width="imageInfo.width"
        :height="imageInfo.height"
        :round="imageInfo.round"
        :radius="imageInfo.radius"
      />
    </view>
    <view v-if="$slots.menu" class="card-menu-box">
      <slot name="menu" />
    </view>
    <u-checkbox
      class="select"
      v-if="supportSelect"
      :value="isSelect"
      shape="square"
      icon-size="16px"
      :disabled="disabledSelect"
      :active-color="theme.primary_color"
      @change="onSelectChange"
    />
  </view>
</template>

<script>
export default {
  name: 'imageCard',
  props: {
    // 卡片绑定的数据
    data: {
      type: Object
    },
    // 是否选中
    isSelect: {
      type: Boolean,
      default: false
    },
    // 选中是否灰化
    disabledSelect: {
      type: Boolean,
      default: false
    },
    // 是否显示选择框
    supportSelect: {
      type: Boolean,
      default: false
    },
    // 图片信息
    imageInfo: {
      type: Object,
      default: () => ({
        show: false,
        imageAlign: 'center',
        imagePosition: 'left',
        src: undefined,
        fit: 'fill',
        width: '100px',
        height: '100px',
        round: false,
        radius: '3px'
      })
    },
    customClass: {
      type: String
    }
  },
  methods: {
    onSelectChange (val) {
      this.$emit('select', this.data, val.value);
    },
    onClick () {
      this.$emit('click', this.data);
    }
  }
};
</script>

<style scoped>
  .image-card {
    position: relative;
    padding: 16px 16px;
    border-radius: 10px;
  }
  .card-box {
    display: flex;
    justify-content: flex-start;
  }
  .card-content {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100px;
  }
  .select {
    position: absolute;
    left: 8px;
    top: 17px;
  }
</style>
